<template>
  <el-row class="teacher-info">
    <el-col class="card-container red" :span="8">
      <div class="card">
        <div class="avatar">
          <img :src="avatar" />
          <span @click="toggleChangeUserImg">更换头像</span>
        </div>
        <p class="name">HuiAzir</p>
        <p class="introduce">一位神秘的讲师</p>
        <p class="status">
          <span>关注：22</span>
          <span>课程：10</span>
        </p>
      </div>
    </el-col>
    <el-col class="form-container green" :span="16">
      <info-form class="form"></info-form>
    </el-col>
    <ChangUserImg v-show="showChangeUserImg" @close-changeUserImg="toggleChangeUserImg"/>
  </el-row>
</template>

<script>
import { Row, Col } from "element-ui";
import InfoForm from "./components/InfoForm";
export default {
  components: {
    ElRow: Row,
    ElCol: Col,
    ChangUserImg: () => import("./components/ChangeUserImg"),
    InfoForm
  },
  data() {
    return {
      showChangeUserImg: false
    };
  },
  computed: {
    avatar() {
      return this.$store.state.teacher.userImg;
    }
  },
  methods:{
    toggleChangeUserImg(){
      this.showChangeUserImg = !this.showChangeUserImg
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .teacher-info {
    height: 100%;
    .card-container {
      max-width: 600px;
      min-height: 100%;
      .card {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        width: 100%;
        height: 320px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin: 30px auto;
        .avatar {
          position: relative;
          margin-top: 40px;
          border-radius: 50%;
          overflow: hidden;
          width: 130px;
          height: 130px;
          img {
            width: 100%;
            height: 100%;
          }
          &:hover {
            span {
              opacity: 1;
            }
          }
          span {
            opacity: 0;
            transition: all 0.2s;
            position: absolute;
            cursor: pointer;
            text-align: center;
            width: 100%;
            z-index: 3;
            left: 0;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            bottom: 15px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
          }
        }
        p {
          margin: 10px;
          &.name {
            font-size: 18px;
            letter-spacing: 1px;
            color: #455a64;
          }
          &.introduce {
            font-size: 13px;
            color: #99abb4;
          }
          &.status {
            font-size: 15px;
            color: #455a64;
            span {
              margin: 0 20px;
            }
          }
        }
      }
    }
    .form-container {
      min-height: 100%;
      box-sizing: border-box;
      padding: 0 20px;
      .form {
        box-sizing: border-box;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        width: 100%;
        max-width: 800px;
        min-height: 300px;
        background-color: #fff;
        margin-left: 30px;
        margin-top: 30px;
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
  .teacher-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .card-container {
      min-height: 100%;
      width: 400px;
      .card {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        width: 100%;
        height: 320px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px auto;
        justify-content: flex-start;
        .avatar {
          margin-top: 40px;
          border-radius: 50%;
          overflow: hidden;
        }
        p {
          margin: 10px;
          &.name {
            font-size: 18px;
            letter-spacing: 1px;
            color: #455a64;
          }
          &.introduce {
            font-size: 13px;
            color: #99abb4;
          }
          &.status {
            font-size: 15px;
            color: #455a64;
            span {
              margin: 0 20px;
            }
          }
        }
      }
    }
    .form-container {
      min-height: 100%;
      width: 100%;
      .form {
        box-sizing: border-box;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        width: 100%;
        min-height: 300px;
        background-color: #fff;
        margin: 20px auto;
      }
    }
  }
}
</style>